<!DOCTYPE html>
<html lang="en">

<head>
       {ms:include filename=headFile.htm/} 
</head>

<body class="white">
    <div id="appCtrl" v-locak>
        <mt-header title="注册">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="form-login">
    	    <div class="login-logo"></div>

            <mt-field 
            placeholder="请输入手机号码/姓名" 
            v-model="mobile">
                <i slot="icon" class="login-icon"></i>
            </mt-field>

            <mt-field 
            placeholder="短信验证码"
            v-model="code">
                <i slot="icon" class="login-icon login-psw"></i>
                <mt-countdown style="min-width:120px " :send="send"></mt-countdown>
            </mt-field>

            <mt-field 
            placeholder="设置6~20位之间的密码"
            type="password" v-model="psw">
                <i slot="icon" class="login-icon login-psw"></i>
            </mt-field>

            <div style="padding:15px">
                <mt-button size="large" type="primary" @click.native="submit">立即注册</mt-button>
            </div>
            
            <p style="text-align:center;padding-top: 20px;">
            	<span class="cGray">已有账号？</span>
            	<a class="cGold">立即登录</a>
            </p>
        </div>
    </div>
    <script>
    var vm = new Vue({
        el: '#appCtrl',

        data: function(){
        	return {
        		mobile:'',
        		psw:'',
                code:'',

                start: false
        	}
        },

        methods:{
        	submit: function(){
        		if(!this.mobile){
        			this.$toast('请输入手机号码、');
        			return;
        		}
                if(!/^0?(13|15|18|14|16|17|19)[0-9]{9}$/.test(this.mobile)){
                    this.$toast('手机号码格式有误');
                    return;
                }
        		if(!this.psw){
        			this.$toast('请输入登录密码');
        			return;
        		}
        		if(this.psw.length<6||this.psw.length>20){
        			this.$toast('6~20位之间的密码');
        			return;
        		}
				
				$.ajax({
						type: 'POST',
						url:'http://test.51dfs.cn/kder-api/user/reg.do',
						data: {"phone":vm.mobile,"indentify":vm.code,"psw":vm.psw,"page":"register",clientType:'mobile'},
						dataType:'json',
						success:function(res){
							if(res.code==="0"){
								location.href = "{ms:global.url/}/183/index.html";
							}else{								
								vm.$toast(res.msg);
							}
						}
					})
				  //end ajax
						  
        	},

            sendCode: function() {
                setTimeout(() => {//这里该ajax
					vm.start = true;
					vm.$toast({
						mes: '已发送',
						icon: 'success',
						timeout: 1500
					});

                }, 1000);
            },

            send: function(success, fail){
                if(!this.mobile){
                    this.$toast('请输入手机号码、');
                    return;
                }
                if(!/^0?(13|15|18|14|16|17|19)[0-9]{9}$/.test(this.mobile)){
                    this.$toast('手机号码格式有误');
                    return;
                }
				
				success();//ajax发送短信的时候调用success 进入倒计时
				$.ajax({
						type:'POST',
						url:'http://test.51dfs.cn/kder-api/sms/send.do',
						dataType:'json',
						data:{
							phone: vm.mobile,
							page:'register',
							clientType:'mobile'
						},
						success:function(res){
							if(res.code==="0"){
								vm.start = true;
								vm.$toast({
									mes: '已发送',
									icon: 'success',
									timeout: 1500
								});
							}else{
								fail();
								vm.$toast(res.msg);
							}
						}
					})
					// 发送短信后倒计时
                //fail();//发送失败的时候调用，解除按钮的disable
            }

        }
    })
    </script>
</body>

</html>
